<template>
	<!--使用uniapp扩展组件的calendar-->
	<view :class="$isPc ? 'pc-calendar' : ''">
		<uni-calendar
			:ref="refCompCalendar"
			:date="options.date"
			:lunar="options.lunar"
			:startDate="options.startDate"
			:endDate="options.endDate"
			:range="range"
			:insert="options.insert"
			:clearDate="options.clearDate"
			:selected="options.selected"
			:showMonth="options.showMonth"
			@confirm="_confirm"
			></uni-calendar>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		name:"c-base-calendar",
		props: {
			range: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				refCompCalendar: "refCompCalendar",
				options: {},
				defaultOptions: {
					paramName: "",
					date: "",
					lunar: true,
					startDate: "",
					endDate: "",
					insert: false,
					clearDate: true,
					selected: [],
					showMonth: true
				}
			}
		},
		created() {
			this.options = JSON.parse(JSON.stringify(this.defaultOptions))
		},
		methods: {
			open(options) {
				if (options) {
					for (let i in this.options) {
						this.options[i] = options[i] || this.options[i]
						if (i == "clearDate" || i == "lunar" || i == "showMonth") {
							this.options[i] = options[i] !== false ? true : false
						}
						if (i == "insert") {
							this.options[i] = options[i] || false
						}
					}
				}
				this.$refs[this.refCompCalendar].open()
			},
			_confirm(item) {
				item.paramName = this.options.paramName
				// 如果是时间范围，需要处理
				if (this.range) {
					let beforeTime = item.range.before || item.fulldate
					let afterTime = item.range.after || item.fulldate
					if (moment(beforeTime).isSameOrAfter(afterTime)) {
						item.range.before = afterTime
						item.range.after = beforeTime
					} else {
						item.range.before = beforeTime
						item.range.after = afterTime
					}
				}
				this.$emit("selected", item)
				this._close()
			},
			_close() {
				this.$refs[this.refCompCalendar].close()
			}
		}
	}
</script>

<style lang="scss">
	.pc-calendar {
		/deep/ .uni-calendar__content {
			left: calc(50% - 200px);
			bottom: calc(50vh - 223px);
			width: 446px;
			.uni-calendar-item--multiple {
				background-color: #50a6f6;
			}
			.uni-calendar-item--isDay,
			.uni-calendar-item--checked,
			.uni-calendar-item--before-checked,
			.uni-calendar-item--after-checked {
				background-color: #0183fb;
			}
		}
	}
	/deep/ .uni-calendar__content {
		.uni-calendar-item--multiple {
			background-color: #50a6f6;
		}
		.uni-calendar-item--isDay,
		.uni-calendar-item--checked,
		.uni-calendar-item--before-checked,
		.uni-calendar-item--after-checked {
			background-color: #0183fb;
		}
	}
</style>
